<script setup lang="ts">

import IndexSmallTitle from "./common/IndexSmallTitle.vue";
import GroupButtons from "./common/GroupButtons.vue";
import IndexTrainingChart from "./IndexTrainingChart.vue";
import IndexTraingChartLine from "./IndexTraingChartLine.vue";
import {onMounted, ref} from "vue";
import {useRoute,useRouter} from "vue-router";

let buttons = ref([
  {label: '日趋势', selected: true},
  {label: '周趋势', selected: false},
  {label: '月趋势', selected: false},
]);



const route = useRoute();
const router = useRouter();

///月份
let month:string = '6月';

///
let nameList:Array<string> = ['西安站', '西安车务段', '西安西站', '新丰镇站', '安康车务段', '安康东站','汉中车务段','宝鸡东站','宝鸡车务段','铜川车务段','延安车务段','延安运营维修段','韩城车务段'];

function clickHandler(selectedIndex:number,upRoute:boolean){
  buttons.value.forEach((e,index)=>{
    e.selected=false;
    if(index === selectedIndex){
      e.selected = true;
    }
  })

  if(upRoute){
    updateRoute(selectedIndex);
  }
}

onMounted(()=>{
  const trendTraining = Array.isArray(route.query.trendTraining)
      ? route.query.trendTraining[0]
      : route.query.trendTraining;
  console.log(trendTraining, 'trendTraining');
  // 解析为整数
  const index = parseInt(trendTraining||'0', 0);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHandler(index,false);
  } else {
    console.error('Invalid trendTraining:', trendTraining);
  }
});

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      trendTraining: index,
    },
  });
};

</script>

<template>
  <div class="main_style">
  <IndexSmallTitle title="培训走势"></IndexSmallTitle>
    <GroupButtons @ccc="clickHandler" :buttons="buttons" style="margin-top: 20px" :width="235"></GroupButtons>
    <IndexTrainingChart style="margin-top:20px"></IndexTrainingChart>
    <div style="display: flex;flex-wrap: wrap;gap: 20px;margin-top: 20px">
      <div v-for="(elment,index) in nameList" class="itemStyle"  :key=index>
        <IndexTraingChartLine  :name=elment :month=month ></IndexTraingChartLine>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main_style{
  margin-top: 20px;
  margin-right: 20px;
  background: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  padding: 10px 15px;
  border: 1px solid rgba(4,42,94,0.1);
}

.itemStyle{
  flex: 0 0 calc(50% - 11px); /* 50% width minus the gap */
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(0,0,0,0.1);
}

</style>